<template>
    <fieldset>
        <legend>目标</legend>
        <h1>成为新世界的神</h1>
        <h1>动态路由参数:{{msg.params}}</h1>
        <h2>
            vuex中的name: 
            <i style="color:red">{{ nickname }}</i>
        </h2>
        <h2>
            getters的值:
            <i style="color:red">{{ reverseN }}</i>
        </h2>
        <fieldset>
            <legend>计数器</legend>
            <button @click="DECREASE(777)">-</button>
            &nbsp;
            <b>{{ age }}</b>
            &nbsp;
            <button @click="INCREASE(666)">+</button>
        </fieldset>
    </fieldset>
</template>


<script>
import { mapState,mapGetters,mapMutations } from "vuex"
export default {
    computed: {
        ...mapState(['name','age','nickname']),
        ...mapGetters(['reverseN']),
    },
    data(){
        return{
            msg:''
        }
    },
    mounted(){
        // console.log("route", this.$route)
        // console.log("router", this.$router)
        this.msg = this.$route
        // console.log(this.$route === this.$router.history.current)
        // console.log(this.$store)
        console.log(this.nickname)
        console.log(this.reverseN)
    },
    methods: {
        // handleClick(){
        //     this.$store.commit('INCREASE','喜羊羊')
        // },
        
        ...mapMutations(['INCREASE','DECREASE']),
    }
}
</script>